<template>
    <el-drawer v-model="isShow" :title="title" :destroy-on-close="true" size="50%" :close-on-press-escape="false"
        :close-on-click-modal="false" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>

        <el-form :model="form" label-width="auto" ref="formRef" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="服装装备名称" required prop="name">
                        <el-input v-model="form.name" placeholder="请输入服装装备名称" maxlength="25" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属单位" required>
                        <el-tree-select v-model="form.unitId" :data="deptOptions" default-expand-all
                            :props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId"
                            placeholder="选择上级部门" check-strictly :disabled="true" />
                        <!--  -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="有效期（年）" required prop="youxiaoqi">
                        <el-input v-model="form.youxiaoqi" placeholder="有效期（年）" maxlength="10" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">

                <el-col :span="12">
                    <el-form-item label="发放默认数" required prop="qtyci">
                        <el-input v-model="form.qtyci" placeholder="发放默认数" maxlength="10" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计量单位" required prop="jiliangdanwei">
                        <el-select v-model="form.jiliangdanwei" clearable>
                            <el-option v-for="item in nj_jiliangdanwei" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" placeholder="备注" maxlength="50" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">

                <el-col :span="12">
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.state">
                            <el-radio v-for="(item, index) in sys_normal_disable" :key="'state' + index"
                                :value="item.value">{{
                                    item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button type="primary" @click="submitHandle">提交</el-button>
            <el-button @click="cancel">取 消</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import { createClothing, editClothing, getClothingInfo } from "@/api/ParameterSetting/Clothing";
import { listDept, } from "@/api/system/dept";
import { getUserProfile } from "@/api/system/user";

const { proxy } = getCurrentInstance()
const { sys_normal_disable, nj_jiliangdanwei } = proxy.useDict('sys_normal_disable', 'nj_jiliangdanwei')
// 是否显示抽屉
const isShow = ref(false)
// 抽屉标题
const title = ref('')
// 部门
const department = ref([])
// 所属单位
const deptOptions = ref([]);
// 办案区列表
const PoliceAreaList = ref([]);
// 通知事件
const emit = defineEmits(['getClothingList'])

const rules = {
    name: [{ required: true, message: "服装装备名称不能为空", trigger: "blur" }],
    // phone: [{ required: true, message: "手机不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    youxiaoqi: [{ required: true, message: "有效期（年）不能为空", trigger: "blur" }, { pattern: /^-?\d+$/, message: "请输入整数", trigger: "blur" }],
    qtyci: [{ required: true, message: "发放默认数不能为空", trigger: "blur" }, { pattern: /^-?\d+$/, message: "请输入整数", trigger: "blur" }],
    // caseInfo: [{ required: true, message: "基本案情不能为空", trigger: "blur" }],
    // process: [{ required: true, message: "检察机关履职过程不能为空", trigger: "blur" }],
    // significance: [{ required: true, message: "指导意义不能为空", trigger: "blur" }]
}

// 房间
const form = ref({
    name: undefined,
    jiliangdanwei: undefined,
    adddate: undefined,
    youxiaoqi: undefined,
    unitId: undefined,
    qtyci: undefined,
    state: '0',
})

const deptqueryParams = ref({
    status: undefined,
})
const changeShowStatus = () => {
    isShow.value = !isShow.value
}

// 获取个人信息
const getUserInfo = async () => {
    await getUserProfile().then(res => {
        form.value.unitId = res.data.unitId;
    })
}

// 添加服装装备
const showAddDrawer = () => {
    title.value = '添加服装装备';
    reset();
    getUserInfo();//找当前登录用户所在部门    
    getDepartment();
    changeShowStatus();
}

// 修改服装装备 
const showEditDrawer = async (data) => {
    title.value = '修改服装装备'
    reset();
    getDepartment();
    await getClothingInfo(data.clothing_id).then(res => {
        form.value = res.data;
        form.value.unitId = parseInt(res.data.unitId);   
        // console.log(res.data);      
    })
    changeShowStatus();

}
defineExpose({ showAddDrawer, showEditDrawer })



//获取单位（部门）列表
const getDepartment = async () => {
    await listDept(deptqueryParams.value).then(res => {
        deptOptions.value = res.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, "deptId");
    })
}


onMounted(() => {
    // getDepartment()
    getUserInfo()
    // console.log('1');
})

const submitHandle = async () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value['clothingId']) {
                editClothing(form.value).then(res => {
                    changeShowStatus()
                    emit('getClothingList', '来了老弟')
                })
            } else {
                // console.log(form.value);
                createClothing(form.value).then(res => {
                    changeShowStatus()
                    emit('getClothingList', '来了老弟')
                })
            }
        }

    });
}

// 关闭后的回调事件
const closeHandle = () => {
    // form.value = defaultQuery
    reset()
}
/** 重置操作表单 */
function reset() {
    form.value = {
        name: undefined,
        jiliangdanwei: undefined,
        adddate: undefined,
        youxiaoqi: undefined,
        unitId: undefined,
        qtyci: undefined,
        state: '0',
    };
    proxy.resetForm("userRef");
};
/** 取消按钮 */
const cancel = () => {
    isShow.value = false
    // form.value = defaultQuery
    reset();
}
</script>

<style lang="scss" scoped>
h4 {
    margin: 10px 0;
}
</style>